<template>
	<div style="display: flex; align-items: center;justify-content: center;height: 100%;">
		<div class="box_one">
			<div class="box_position">
				<span class="JHTQDNgoldenCounts">{{ JHTQDNgoldenCounts }} </span>
				<span class="JHTQDNfireCounts">{{ JHTQDNfireCounts }} 次</span>
				<span class="JHTQDNprobeNo">{{ JHTQDNprobeNo }}</span>
				<!--        火探青岛躲藏-->
				<span class="HTQDfireCounts">{{ HTQDfireCounts }} 次</span>
				<span class="HTQDprobeNo">{{ HTQDprobeNo }}</span>

				<!--        火探特绿躲藏-->
				<span class="HTTLfireCounts">{{ HTTLfireCounts }} 次</span>
				<span class="HTTLprobeNo">{{ HTTLprobeNo }}</span>

				<span class="JHTTLBgoldenCounts">{{ JHTTLBgoldenCounts }} </span>
				<span class="JHTTLBfireCounts">{{ JHTTLBfireCounts }} 次</span>
				<span class="JHTTLBprobeNo">{{ JHTTLBprobeNo }}</span>
			</div>
		</div>
	</div>
</template>
<script>
    import calHeight from '../../../../mixins/cal-table-height';
    import getMenuColumn from '../../../../mixins/getMenuColumn';
    import handlerCache from '../../../../mixins/handler-cache';

    export default {
        name: 'ChartView',

        mixins: [calHeight, getMenuColumn, handlerCache],
        props: {
            tableData: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                JHTQDNprobeNo: null, // 火花报警探头编号
                JHTQDNfireCounts: null, // 火花报警次数
                JHTQDNgoldenCounts: null, // 金属计数
                JHTTLBprobeNo: null, // 火花报警探头编号
                JHTTLBfireCounts: null, // 火花报警次数
                JHTTLBgoldenCounts: null, // 金属计数
                HTQDprobeNo: null, // 火花报警探头编号
                HTQDfireCounts: null, // 火花报警次数
                HTQDgoldenCounts: null, // 金属计数
                HTTLprobeNo: null, // 火花报警探头编号
                HTTLfireCounts: null, // 火花报警次数
                HTTLgoldenCounts: null // 金属计数
            };
        },
        methods: {

        },
        mounted() {
            this.tableData.forEach(x => {
                if (x.machineCode === '金火探-青岛线-南通道') {
                    this.JHTQDNprobeNo = x.probeNo;
                    this.JHTQDNfireCounts = x.fireCounts;
                    this.JHTQDNgoldenCounts = x.goldenCounts;
                } else if (x.machineCode === '金火探-特吕线-北通道') {
                    this.JHTTLBprobeNo = x.probeNo;
                    this.JHTTLBfireCounts = x.fireCounts;
                    this.JHTTLBgoldenCounts = x.goldenCounts;
                } else if (x.machineCode === '火探-青岛多仓') {
                    this.HTQDprobeNo = x.probeNo;
                    this.HTQDfireCounts = x.fireCounts;
                    this.HTQDgoldenCounts = x.goldenCounts;
                } else {
                    this.HTTLprobeNo = x.probeNo;
                    this.HTTLfireCounts = x.fireCounts;
                    this.HTTLgoldenCounts = x.goldenCounts;
                }
            });
        },
        watch: {
            tableData(value) {
                value.forEach(x => {
                    if (x.machineCode === '金火探-青岛线-南通道') {
                        this.JHTQDNprobeNo = x.probeNo;
                        this.JHTQDNfireCounts = x.fireCounts;
                        this.JHTQDNgoldenCounts = x.goldenCounts;
                    } else if (x.machineCode === '金火探-特吕线-北通道') {
                        this.JHTTLBprobeNo = x.probeNo;
                        this.JHTTLBfireCounts = x.fireCounts;
                        this.JHTTLBgoldenCounts = x.goldenCounts;
                    } else if (x.machineCode === '火探-青岛多仓') {
                        this.HTQDprobeNo = x.probeNo;
                        this.HTQDfireCounts = x.fireCounts;
                        this.HTQDgoldenCounts = x.goldenCounts;
                    } else {
                        this.HTTLprobeNo = x.probeNo;
                        this.HTTLfireCounts = x.fireCounts;
                        this.HTTLgoldenCounts = x.goldenCounts;
                    }
                });
            }
        }
    };
</script>
<style lang="scss" scoped>
.box_one{
  width: 100%; /* 设置宽度为100% */
  height: 75vh ; /* 设置高度为视口高度 */
  background-image: url('./jht.png'); /* 指定背景图路径 */
  background-size: cover; /* 调整背景图大小以覆盖整个容器 */
  background-position: center; /* 图像居中显示 */
  background-repeat: no-repeat; /* 图像不重复 */
  .box_position{
    position: relative;
    width: 100%; /* 设置宽度为100% */
    height: 70vh ; /* 设置高度为视口高度 */
    color: #3a3e42;
    font-weight: bold;
    .JHTQDNgoldenCounts{
      position: absolute;
      left: 27%;
      top: 51%;
      font-size: 1vw;
    }
    .JHTQDNfireCounts{
      position: absolute;
      left: 27%;
      top: 54.8%;
      font-size: 1vw;
    }
    .JHTQDNprobeNo{
      position: absolute;
      left: 27%;
      top: 58.8%;
      font-size: 1vw;
    }

    .JHTTLBgoldenCounts{
      position: absolute;
      left: 83%;
      top: 48.9%;
      font-size: 1vw;
    }
    .JHTTLBfireCounts{
      position: absolute;
      left: 83%;
      top: 52.8%;
      font-size: 1vw;
    }
    .JHTTLBprobeNo{
      position: absolute;
      left: 83%;
      top: 56.9%;
      font-size: 1vw;
    }
    .HTQDfireCounts{
      position: absolute;
      left: 45%;
      top: 50.3%;
      font-size: 1vw;
    }
    .HTQDprobeNo{
      position: absolute;
      left: 45%;
      top: 54.4%;
      font-size: 1vw;
    }
    .HTTLprobeNo{
      position: absolute;
      left: 65%;
      top: 54.4%;
      font-size: 1vw;
    }
    .HTTLfireCounts{
      position: absolute;
      left: 65%;
      top: 50.3%;
      font-size: 1vw;
    }
  }
}
</style>
